/**
 * 加载高德地图
 */
import {esri} from '../../api/esriAPI'

var {BaseTileLayer, Color, esriConfig, Map, MapView, SceneView, esriRequest} = esri;

export class AMap {
  constructor() {
    let TintLayer = BaseTileLayer.createSubclass({
      properties: {
        urlTemplate: null,
        tint: {
          value: null,
          type: Color
        }
      },
      // generate the tile url for a given level, row and column
      getTileUrl: function (level, row, col) {
        return this.urlTemplate
          .replace("{z}", level)
          .replace("{x}", col)
          .replace("{y}", row);
      },

      // This method fetches tiles for the specified level and size.
      // Override this method to process the data returned from the server.
      fetchTile: function (level, row, col) {
        // call getTileUrl() method to construct the URL to tiles
        // for a given level, row and col provided by the LayerView
        var url = this.getTileUrl(level, row, col);
        // request for tiles based on the generated url
        // set allowImageDataAccess to true to allow
        // cross-domain access to create WebGL textures for 3D.
        return esriRequest(url, {
          responseType: "image",
          allowImageDataAccess: true
        }).then(
          function (response) {
            // when esri request resolves successfully
            // get the image from the response
            var image = response.data;
            var width = this.tileInfo.size[0];
            var height = this.tileInfo.size[0];

            // create a canvas with 2D rendering context
            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");
            canvas.width = width;
            canvas.height = height;

            // Draw the blended image onto the canvas.
            context.drawImage(image, 0, 0, width, height);

            return canvas;
          }.bind(this)
        );
      }
    });
    // *******************************************************
    // Start of JavaScript application
    // *******************************************************
    // //将stamen url添加到已知支持CORS规范的服务器列表中。
    esriConfig.request.corsEnabledServers.push("webst01.is.autonavi.com");
  }
}

export const AMap = {};
AMap.init = function () {
  var {BaseTileLayer, Color, esriConfig, Map, MapView, SceneView, esriRequest} = esri;
  let TintLayer = BaseTileLayer.createSubclass({
    properties: {
      urlTemplate: null,
      tint: {
        value: null,
        type: Color
      }
    },
    // generate the tile url for a given level, row and column
    getTileUrl: function (level, row, col) {
      return this.urlTemplate
        .replace("{z}", level)
        .replace("{x}", col)
        .replace("{y}", row);
    },

    // This method fetches tiles for the specified level and size.
    // Override this method to process the data returned from the server.
    fetchTile: function (level, row, col) {
      // call getTileUrl() method to construct the URL to tiles
      // for a given level, row and col provided by the LayerView
      var url = this.getTileUrl(level, row, col);
      // request for tiles based on the generated url
      // set allowImageDataAccess to true to allow
      // cross-domain access to create WebGL textures for 3D.
      return esriRequest(url, {
        responseType: "image",
        allowImageDataAccess: true
      }).then(
        function (response) {
          // when esri request resolves successfully
          // get the image from the response
          var image = response.data;
          var width = this.tileInfo.size[0];
          var height = this.tileInfo.size[0];

          // create a canvas with 2D rendering context
          var canvas = document.createElement("canvas");
          var context = canvas.getContext("2d");
          canvas.width = width;
          canvas.height = height;

          // Draw the blended image onto the canvas.
          context.drawImage(image, 0, 0, width, height);

          return canvas;
        }.bind(this)
      );
    }
  });
// *******************************************************
// Start of JavaScript application
// *******************************************************
// //将stamen url添加到已知支持CORS规范的服务器列表中。
  esriConfig.request.corsEnabledServers.push("webst01.is.autonavi.com");
// 创建TintLayer的新实例并设置其属性
  let digitallTileLayer = new TintLayer({
    urlTemplate: 'http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    tint: new Color("#004FBB"),
    title: "高德"
  });
  let satelliteTileLayer = new TintLayer({
    urlTemplate: 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    tint: new Color("#004FBB"),
    title: "高德"
  });
  let stamenTileLayer = new TintLayer({
    urlTemplate: 'http://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
    tint: new Color("#004FBB"),
    title: "高德"
  });
// 在地图中添加自定义切片图层的新实例
  let map = new Map({
    layers: [digitallTileLayer, satelliteTileLayer, stamenTileLayer]
  });
// create a new scene view and add the map
//2d
  let view2D = new MapView({
    container: "mapId1",
    map: map,
    center: [110.1, 23.8],
    zoom: 3
  });
//3d
  let view3D = new SceneView({
    container: "container1",
    map: map,
    center: [110.1, 23.8],
    zoom: 1
  })
}



